<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table,
        th,
        td {
            border: 0.5px solid #333;
        }

        table {
            width: 350px;
            border-collapse: collapse;
            line-height: 40px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table id="table">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
    </table>
</body>
<script>
    var table = document.getElementById("table");

    var list = [
        ["张三", 55, 66, 77],
        ["李四", 78, 96, 82],
        ["王五", 70, 82, 94],
    ]

    list.sort(function (a, b) {
        // console.log(a, b);  // 参数比较的两个元素 -> 数组
        return (b[1] + b[2] + b[3]) - (a[1] + a[2] + a[3]);
    })
    console.log(list);



    // 传统字符串(''  "")的缺点: 不允许在中途换行 => 换行报错

    // 1. 不换行
    // 2. 改为多字符串拼接(一行一个字符串)
    // 3. ES6新增模板字符串(``)  
    //    优点  1. 允许字符串换行   2. 

    // 变量 -> 用于存储html结构(字符串)
    var html = `<tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>`;

    for (var i = 0; i < list.length; i++) {
        html += "<tr>";

        var item = list[i]; //item =  ["张三", 55, 66, 77]
        var sum = 0;
        for (var j = 0; j < item.length; j++) {
            // document.write("<td>" + item[j] + "</td>");
            html += `<td>${item[j]}</td>`;
            if (j == 0) continue;
            sum += item[j];
        }
        html += `<td>${sum}</td>`;

        html += "</tr>";
    }

    table.innerHTML = html;  //统一输出到页面上


</script>

</html>